<template>
  <el-container class="home" :class="{ index: isIndex }">
    <el-aside width="200px">
      <ul class="nav-list">
        <li class="nav-item" :class="$route.path === item.path ? 'active' : ''" v-for="item in hMenu" :key="item.path"
          @click="skipPage(item)">
          <i :class="item.meta.icon"></i>
          {{ item.meta.title }}
        </li>
        <li class="tools">
          <el-tooltip class="item" effect="dark" content="前往后台">
            <i class="el-icon-office-building" @click="gotoAdmin" v-if="isAdmin"></i> </el-tooltip>
          <el-divider direction="vertical" v-if="isAdmin"></el-divider>
          <el-tooltip class="item" effect="dark" content="退出登录">
            <i class="el-icon-switch-button" @click="logOut"></i>
          </el-tooltip>
        </li>
      </ul>

      <!-- <el-menu :default-active="this.$route.path" mode="horizontal" class="w" router>
        <el-menu-item :index="item.path" v-for="item in hMenu" :key="item.path">
          {{ item.meta.title }} <span v-if="item.name === 'cart' && cartNum > 0" class="corner-ico">{{ cartNum
          }}</span></el-menu-item>

        <el-menu-item class="h-info">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              <el-avatar :src="bindIMG(user.avatar.filename)" :size="30" alt="" v-if="user.avatar"> </el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="goToInfo">我的主页</el-dropdown-item>
              <el-dropdown-item command="gotoAdmin" v-if="isAdmin">管理系统</el-dropdown-item>
              <el-dropdown-item command="logOut">退出系统</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu> -->

    </el-aside>
    <el-main class="main">
      <router-view />
    </el-main>

    <!-- <el-dialog title="" :visible.sync="rankListVisible" width="60%">
      <bookList :data="topBooks" :nav="''" isRank @close="rankListVisible = false" />
    </el-dialog> -->
    <!-- <el-dialog title="" :visible.sync="suggestVisible" width="60%">
      <el-form :model="suggestForm" :rules="rules" ref="suggestForm">
        <el-form-item label="图书名称" prop="bookId">
          <el-select v-model="suggestForm.bookId" filterable>
            <el-option v-for="item in getMiniBook()" :key="item.id" :value="item.id" :label="item.name"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报修标题" prop="title">
          <el-input v-model="suggestForm.title"> </el-input>
        </el-form-item>
        <el-form-item label="报修内容" prop="description">
          <el-input type="textarea" :autoSize="{ minRow: 3, maxRows: 6 }" resize="none" v-model="suggestForm.description">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="suggestVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submitDialog" size="small">报修</el-button>
      </div>
    </el-dialog> -->

  </el-container>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
import { bindIMG, randomNumber } from '@utils'
import mixin from '@mixins'

export default {
  mixins: [mixin.home],
  data() {
    return {
      rankListVisible: false,
      suggestVisible: false,
      books: [],
      suggestForm: {
        bookId: '',
        title: ''
      },
      rules: {
        bookId: [{ required: true, message: '请选择需要报修的图书', trigger: 'blur' }],
        title: [{ required: true, message: '请输入报修标题', trigger: 'blur' }],
        description: [{ required: true, message: '请输入报修内容', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapState(['allCategory', 'currentUser', 'myCart']),
    ...mapGetters(['getCategoryById', 'getMiniBook']),
    user() {
      return this.currentUser
    },
    isAdmin() {
      return this.currentUser.level === 1
    },
    isIndex() {
      return this.$route.name === 'index'
    },
    hMenu() {
      const routes = this.$router.options.routes.find((i) => i.isIndex).children
      return routes.filter((i) => i.meta && i.meta.show === true)
    },
    cartNum() {
      return this.myCart.length
    },
    topBooks() {
      const tBook = this.books?.concat([]).splice(0, 9);
      return tBook;
    }
  },
  methods: {
    bindIMG,
    ...mapActions(['getAllCategory', 'getAllFile']),
    ...mapMutations(['setCurrentBook']),
    skipPage(item) {
      this.$router.push({ path: item.path })
    },
    async getUser() {
      const [avatar] = await this.$api.getFileById({ id: this.user.id })
      this.$set(this.user, 'avatar', avatar)
    },
    handleCommand(callback) {
      this[callback] && this[callback]()
    },
    gotoAdmin() {
      this.$router.push({ name: 'admin' })
    },
    goToInfo() {
      this.$router.push({ name: 'info' })
    },
    randomBook() {
      const len = this.books.length;
      const idx = randomNumber(0, len);
      this.setCurrentBook(this.books[idx]);
      console.log('idx :', idx);
      this.$router.push({
        name: 'bookDetail',
        params: { id: this.books[idx].id }
      });
    },
    gotoPost() {
      this.$router.push({ name: 'addPost' });
    },
    async fetchBook() {
      const { list } = await this.$api.getBookList({ size: 999 });
      list.forEach((item) => {
        item.lxInfo = this.getCategoryById(item.lx);
      });
      this.books = list;
    },
    openRank() {
      this.rankListVisible = true
    },
    openSuggest() {
      this.suggestVisible = true
    },
    submitDialog() {
      this.$refs.suggestForm.validate(async (valid) => {
        if (!valid) return
        const book = this.getMiniBook().filter((item) => item.id === this.suggestForm.bookId)
        Object.assign(this.suggestForm, {
          userId: this.user.id,
          username: this.user.name,
          createTime: Date.now(),
          updateTime: Date.now(),
          state: 0,
          bookName: book[0].name
        })
        const { success } = await this.$api.addErrata(this.suggestForm)
        this.handleSuccess(success, '报修提交', () => {
        })
      })
    }
  },
  async created() {
    await this.fetchBook();
    await this.getAllFile();
    await this.getAllCategory();
    this.getUser()
  },

}
</script>

<style lang="less" scoped>
.el-container.home {
  height: 100vh;
  background-color: #f7edd5;
  display: flex;
  padding: 0;
}

.el-header {
  padding: 0;
  background-color: #fff;
  border-bottom: solid 1px #e6e6e6;
}

// done scrollbar
.w {
  width: 980px;
  margin: 0 auto;
}

.w::-webkit-scrollbar {
  width: 4px; //滚动条的宽度
}

.w::-webkit-scrollbar-thumb {
  background-color: #eba613; //滚动条的颜色
  border-radius: 3px; //滚动条的边框倒角
}

.el-main {
  flex: 1;
  padding: 20px 40px;
}

.h-info {
  margin-left: auto;
}

.home.index {
  position: relative;
  background-color: #fff7f7;
}

.corner-ico {
  text-align: center;
  position: absolute;
  top: 2px;
  right: 0;
  padding: 0 4px;
  min-width: 14px;
  height: 20px;
  line-height: 20px;
  background-color: #eba613;
  color: #fff;
  border-radius: 10px 10px 10px 4px;
  font-size: 14px;
}

.el-menu-item.is-active:not(:focus):not(.h-info) {
  background-color: #eba613;
  color: #fff !important;
  border-color: #eba613;

  &:hover {
    color: #eba613 !important;
  }
}

.el-menu--horizontal>.el-menu-item {
  height: 36px;
  line-height: 36px;
  border-radius: 20px;

}

.el-menu-item.is-active.h-info {
  border-color: transparent;
}

.el-menu.el-menu--horizontal {
  border: none;
  display: flex;
  gap: 8px;

}

.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus:not(.h-info) {
  background-color: #eba613;
  color: #fff !important;

}

.el-header {
  display: flex;
  align-items: center;
}

.book-tool {
  box-sizing: border-box;
  height: 36px;
  line-height: 36px;
  display: flex;
  align-items: center;
  border: 1px solid #eba613;
  width: 100px;
  justify-content: center;
  margin-top: 2px;
  border-radius: 4px;
  color: #eba613;
  transition: all .1s;

  i {
    color: #eba613;
  }

  &:hover {
    background-color: #eba613;
    color: #fff;

    i {
      color: #fff;

    }
  }
}

.book-tool-content {

  .tool-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .tool-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      color: white;
      height: 80px;
      width: 80px;
      color: #8395a7;
      border: 1px dashed #8395a7;
      transition: all .1s;
      border-radius: 2px;

      i {
        font-size: 26px;
      }

      span {
        font-size: 14px;
      }

      &:hover {
        border-color: #eba613;
        color: #eba613;
        cursor: pointer;
      }
    }
  }
}

.nav-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 12px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;

  .nav-item {
    width: 120px;
    height: 120px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;

    i {
      font-size: 40px;
      margin-bottom: 10px;
    }

    transition: all .1s;

    &:hover {
      color: #eba613;
      cursor: pointer;
    }

    &.active {
      background-color: #eba613;
      color: #fff;
    }
  }

  .tools {
    background-color: #fff;
    display: flex;
    align-items: center;
    margin-top: 100px;
    border-radius: 4px;

    i {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;

      &:hover {
        cursor: pointer;
        color: #eba613;

      }
    }

  }
}
</style>
